<template>
  <div id="housemaps" ref="housemaps" style="width:100%;height: 300px;"></div>
</template>
<script>
export default {
  name: "xline",
  props: {
    mapType: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    bottomlineData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    zizhuDatas: {
      type: Array,
      default: () => {
        return [];
      }
    },
    chuzuDatas: {
      type: Array,
      default: () => {
        return [];
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dataOther: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.getsqld();
  },
  methods: {
    getsqld() {
      let echarts = document.getElementById("housemaps");
      console.log(echarts);
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        title: {
          text: "近12月自住出租统计",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "5%"
        },
        tooltip: {
           trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["自住", "出租"],
          textStyle: {
            color: "#fff"
          },
          top: "18%",
          right: "10%",
          icon: "rect"
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.bottomlineData,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            lineStyle: {
              color: ["grey"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%"
        },
        series: [
          {
            name: "自住",
            type: "line",
            data: this.zizhuDatas,
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#68E0CF"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          {
            name: "出租",
            type: "line",
            data: this.chuzuDatas,
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#209CFF"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.x-line {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .line-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>
